<template>
  <div>
    <table-index class="insure-card-table" :table="tableCompulsory" @loadData="loadCompulsoryData" />
  </div>
</template>
<script setup>
  import { useTable } from '@/hooks/table'
  import { getPassListApi } from '@/api/order/etcOrder'
  import { onMounted } from 'vue'

  const props = defineProps({
    orderId: String,
  })
  const loadCompulsoryData = () => {
    tableCompulsory.tableLoading = true
    getPassListApi({ id: props.orderId })
      .then((res) => {
        const result = res.result
        tableCompulsory.dataList = result
      })
      .finally(() => {
        tableCompulsory.tableLoading = false
      })
  }
  // table 配置
  const tableCompulsory = useTable({
    pagination: false,
    columns: [
      { title: '通行记录ID', dataIndex: 'tripId', width: 120, fixed: 'left' },
      { title: '场景类型', dataIndex: 'subSceneName', width: 120 },
      { title: '通行费', dataIndex: 'amt', width: 90, unit: '元' },
    ],
  })
  onMounted(() => {
    loadCompulsoryData()
  })
</script>

<style lang="less" scoped></style>
